<script lang="jsx" setup>
import dayjs from 'dayjs';
import { computed, nextTick, ref } from 'vue';

const commonSearchRef = ref(null);
const searchParams = ref({
  moduleNo: null,
  screenNo: null,
  recordType: 1
});

const searchFormList = [
  {
    type: 'input',
    key: 'moduleNo',
    label: '生产型号',
    placeholder: '请输入生产型号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  },
  {
    type: 'input',
    key: 'screenNo',
    label: '网板编号',
    placeholder: '请输入网板编号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  },
  {
    type: 'input',
    key: 'deptName',
    label: '使用部门',
    placeholder: '请输入使用部门',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  }
  delete params.time;
  return params;
});

const tableRef = ref(null);

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lotId',
    dataIndex: 'lotId',
    title: 'LOT号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'moduleNo',
    dataIndex: 'moduleNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'screenNo',
    dataIndex: 'screenNo',
    title: '网板编号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'frameNo',
    dataIndex: 'frameNo',
    title: '网框编号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'userCount',
    dataIndex: 'userCount',
    title: '使用次数',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'totalCount',
    dataIndex: 'totalCount',
    title: '累计次数',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'operator',
    dataIndex: 'operator',
    title: '使用人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'deptName',
    dataIndex: 'deptName',
    title: '使用部门',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'operationTime',
    dataIndex: 'operationTime',
    title: '使用时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },

  {
    key: 'remark',
    dataIndex: 'remark',
    title: '备注',
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

function search() {
  tableRef.value.getData(1);
}

function reset() {
  searchParams.value = {
    moduleNo: null,
    screenNo: null,
    recordType: 1
  };
  nextTick(() => {
    search();
  });
}
</script>

<template>
  <div class="board-management-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>
    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="column"
      :show-row-selection="false"
      auto-generate-uuid
      row-key="screenId"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/qms/scrscreen/bindRecord/pageList"
    ></Table>
  </div>
</template>

<style lang="scss" scoped>
.popup-item {
  cursor: pointer;
  padding: 8px;

  &:hover {
    background-color: var(--surely-table-row-hover-bg);
  }

  &.disabled {
    color: var(--surely-table-disabled-color);
    cursor: not-allowed;
  }
}
</style>
